<template>
	<view class="info-container">
		<!-- 头像区域 -->
		<view class="avatar-container">
			<view class="avatar-wrapper" @tap="chooseAvatar">
				<image :src="userInfo.avatar || defaultAvatar" class="avatar"></image>
				<view class="avatar-mask"></view>
				<text class="avatar-text">更换头像</text>
			</view>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 昵称 -->
			<view class="form-item">
				<text class="label">昵称</text>
				<input type="text" v-model="userInfo.nickname" placeholder="请输入昵称" class="input" />
			</view>

			<!-- 性别 -->
			<view class="form-item">
				<text class="label">性别</text>
				<view class="radio-group">
					<radio-group @change="setsex">
						<radio value="1" :checked="userInfo.sex==1" color="#e61e2b">男</radio>
						<radio value="2" :checked="userInfo.sex==2" color="#e61e2b">女</radio>
					</radio-group>
				</view>
			</view>

			<!-- 个性签名 -->
			<view class="form-item signature">
				<text class="label">个性签名</text>
				<textarea v-model="userInfo.signature" placeholder="请输入个性签名" class="textarea" maxlength="50"></textarea>
			</view>
		</view>

		<!-- 确定按钮 -->
		<button class="confirm-btn" @tap="submitForm">确定</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	const defaultAvatar = '/static/androidImg/login_head.png';

	export default {
		data() {
			return {
				userInfo: {
					avatar: '',
					sex: '1', // 默认选中
					nickname: '',
					signature: ''
				},
				defaultAvatar,
				imgUrl: ''
			};
		},

		onLoad() {
			this.getUserInfo();
		},

		methods: {
			setsex(event) {
				console.log(event.detail.value)
				this.userInfo.sex = event.detail.value;
			},
			// 获取用户信息
			getUserInfo() {
				uni.showLoading({
					title: '加载中...'
				});

				this.$api.getUserInfo()
					.then(res => {
						uni.hideLoading();
						if (res.data) {
							this.userInfo = {
								avatar: res.data.head || '',
								nickname: res.data.nickname || '',
								sex: res.data.sex !== undefined ? res.data.sex.toString() : '',
								signature: res.data.user_sign || ''
							};
						}
					})
					.catch(err => {
						uni.hideLoading();
						console.error('获取用户信息失败', err);
					});
			},

			// 选择头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						this.uploadAvatar(tempFilePaths[0]);
					}
				});
			},

			// 上传头像
			uploadAvatar(tempFilePath) {
				uni.showLoading({
					title: '上传中...'
				});
				console.log('tempFilePath', tempFilePath)
				uni.uploadFile({
					url: this.$api.BASE_URL + 'app/user/editUserInfo',
					filePath: tempFilePath,
					name: 'img',
					formData: {
						token: uni.getStorageSync('token'),
						head: this.userInfo.avatar,
						img: tempFilePath,
						nickname: this.userInfo.nickname,
						sex: parseInt(this.userInfo.sex),
						user_sign: this.userInfo.signature
					},
					success: (uploadFileRes) => {
						uni.hideLoading();
						const res = JSON.parse(uploadFileRes.data);
						if (res.code == 1) {
							this.getUserInfo();
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('上传头像失败', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					}
				});
			},

			// 提交表单
			submitForm() {
				// 收集修改的字段
				// 构建提交参数，所有基础字段必传
				const submitData = {
					nickname: this.userInfo.nickname,
					sex: parseInt(this.userInfo.sex),
					user_sign: this.userInfo.signature,
					head: this.userInfo.avatar,
				};
				// uni.showLoading({
				// 	title: '保存中...'
				// });

				this.$api.editUserInfo(submitData)
					.then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
						// 更新缓存中的用户信息
						const userInfo = uni.getStorageSync('userInfo') || {};
						uni.setStorageSync('userInfo', {
							...userInfo,
							...submitData
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					})
					.catch(err => {
						uni.hideLoading();
						console.error('保存失败', err);
						uni.showToast({
							title: err.msg || '保存失败',
							icon: 'none'
						});
					});
			}
		}
	};
</script>

<style lang="scss">
	.info-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 头像区域 */
	.avatar-container {
		padding: 60rpx 0;
		text-align: center;
		background-color: #fff;
	}

	.avatar-wrapper {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		margin: 0 auto;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar-text {
		color: #fff;
		font-size: 24rpx;
	}

	/* 表单区域 */
	.form-container {
		margin-top: 20rpx;
		background-color: #fff;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
	}

	.label {
		width: 140rpx;
		font-size: 28rpx;
		color: #333;
	}

	.input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
	}

	.radio-group {
		flex: 1;
		display: flex;
		justify-content: space-between;
		gap: 40rpx;
	}

	.radio-group radio {
		font-size: 28rpx;
		padding: 0 20rpx;
	}

	.signature {
		height: auto;
		padding: 30rpx;
		flex-direction: column;
		align-items: flex-start;
	}

	.textarea {
		width: 100%;
		height: 150rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #333;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	/* 确定按钮 */
	.confirm-btn {
		width: 80%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #e61e2b;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin: 60rpx auto;
	}
</style>